<template>
	<!-- 加载状态组件 -->
	<uni-load-more :status="isLoadingStatus" v-if="isLoading" />
	<!-- 主滚动视图容器 -->
	<scroll-view v-else scroll-y class="author-page">
		<!-- 1. 作者简介区域 -->
		<view class="author-intro">
			<view class="author-header">
				<image :src="`${baseURL}${authorInfo?.avatar}`" mode="aspectFill" class="author-avatar"></image>
				<view class="author-name">{{ authorInfo?.name }}</view>
				<!-- 关注按钮 -->
				<button :class="isFan ? 'followed' : 'unfollowed'" @click="handleFanAuthorData">
					{{ isFan ? '已关注' : '关注' }}
				</button>
			</view>
			<!-- 作者统计信息 -->
			<view class="author-stats">
				<view class="stat-item">粉丝数：{{ authorInfo?.fansCount }}</view>
				<view class="stat-item">点赞数：{{ authorInfo?.likeCount }}</view>
				<view class="stat-item">书籍数：{{ authorInfo?.bookCount }}</view>
			</view>
		</view>

		<!-- 2. 标签选项卡：粉丝，书籍，点赞 -->
		<view class="tabs">
			<view class="tab-item" :class="{ active: tabIndex === 0 }" @click="handleTabClick(0)">粉丝</view>
			<view class="tab-item" :class="{ active: tabIndex === 1 }" @click="handleTabClick(1)">书籍</view>
			<view class="tab-item" :class="{ active: tabIndex === 2 }" @click="handleTabClick(2)">点赞</view>
		</view>

		<!-- 列表信息展示区域 -->
		<swiper :current="currentTabIndex" class="swiper-container">
			<swiper-item v-for="(tab, childIndex) in 3" :key="childIndex">
				<view class="tab-content" v-for="(item, index) in listItems" :key="index">
					<view class="list-item">
						<!-- 左侧图片 -->
						<image :src="`${baseURL}${item.image}`" mode="aspectFill" class="item-avatar"></image>
						<!-- 中间名称和描述 -->
						<view class="item-details">
							<view class="item-name">{{ item.name }}</view>
							<view class="item-description">{{ item.description }}</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</scroll-view>
</template>

<script lang="ts" setup>
	import { addAuthorFanAPI, checkAuthorFanAPI, getAuthorBooksAPI, listAuthorFansAPI, getAuthorInfoAPI } from '@/services/author';
	import { AuthorItem } from '../../types/author';
	import { ref } from 'vue';
	import { baseURL } from '@/utils/config';
	import { onLoad } from '@dcloudio/uni-app';

	/**
	 * 页面加载状态
	 * @type {Ref<boolean>}
	 */
	const isLoading = ref(false);

	/**
	 * 加载状态文本
	 * @type {Ref<string>}
	 */
	const isLoadingStatus = ref('more');

	/**
	 * 从父组件接收的作者名称参数
	 */
	const props = defineProps<{
		authorName : string;
	}>();

	/**
	 * 是否关注作者
	 * @type {Ref<boolean>}
	 */
	const isFan = ref(false);

	/**
	 * 作者信息对象
	 * @type {Ref<AuthorItem | undefined>}
	 */
	const authorInfo = ref<AuthorItem>();

	/**
	 * 当前选中的标签索引
	 * @type {Ref<number>}
	 */
	const tabIndex = ref(0);

	/**
	 * Swiper组件当前显示的索引
	 * @type {Ref<number>}
	 */
	const currentTabIndex = ref(0);

	/**
	 * 列表项数据结构
	 */
	export type ListItem = {
		id : number;
		image : string;
		name : string;
		description : string;
	};

	/**
	 * 显示在列表中的数据
	 * @type {Ref<ListItem[]>}
	 */
	const listItems = ref<ListItem[]>([]);

	/**
	 * 检查是否关注作者
	 * @returns {Promise<void>}
	 */
	const checkAuthorFanStatus = async () : Promise<void> => {
		if (authorInfo.value?.name) {
			checkAuthorFanAPI(authorInfo.value.name).then(res => {
				if (res.data) {
					isFan.value = true;
				}
			});
		}
	};

	/**
	 * 处理标签点击事件
	 * @param {number} index - 标签索引
	 * @returns {Promise<void>}
	 */
	const handleTabClick = async (index : number) : Promise<void> => {
		tabIndex.value = index;
		currentTabIndex.value = index;

		if (index === 0) {
			// 加载粉丝列表
			await loadFansList();
		} else if (index === 1) {
			// 加载书籍列表
			await loadBooksList();
		} else if (index === 2) {
			// 加载点赞列表
			await loadLikesList();
		}
	};

	/**
	 * 加载粉丝列表数据
	 * @returns {Promise<void>}
	 */
	const loadFansList = async () : Promise<void> => {
		const res = await listAuthorFansAPI(props.authorName);
		listItems.value = res.data.map(item => ({
			id: item.id,
			image: item.userAvatar || '',
			name: item.userName || '',
			description: '',
		}));
	};

	/**
	 * 加载书籍列表数据
	 * @returns {Promise<void>}
	 */
	const loadBooksList = async () : Promise<void> => {
		const res = await getAuthorBooksAPI(props.authorName);
		if (res.data) {
			listItems.value = res.data.map(item => ({
				id: item.id,
				image: item.image || '',
				name: item.name || '',
				description: item.description || '',
			}));
		}
	};

	/**
	 * 加载点赞列表数据
	 * @returns {Promise<void>}
	 */
	const loadLikesList = async () : Promise<void> => {
		listItems.value = [];
	};

	/**
	 * 处理关注/取消关注作者
	 * @returns {Promise<void>}
	 */
	const handleFanAuthorData = async () : Promise<void> => {
		if (authorInfo.value?.name) {
			addAuthorFanAPI(authorInfo.value.name).then(res => {
				checkAuthorFanStatus();
			});
		}
	};

	/**
	 * 获取作者信息
	 * @returns {Promise<void>}
	 */
	const getAuthorInfo = async () : Promise<void> => {
		getAuthorInfoAPI(props.authorName).then((res) => {
			authorInfo.value = res.data;
		});
	};

	/**
	 * 页面加载生命周期
	 */
	onLoad(async () => {
		isLoading.value = true;
		isLoadingStatus.value = 'loading';

		// 获取作者信息
		await getAuthorInfo();

		// 检查是否关注作者
		await checkAuthorFanStatus();

		// 默认加载粉丝列表
		await handleTabClick(0);

		// 延迟隐藏加载状态
		setTimeout(() => {
			isLoading.value = false;
			isLoadingStatus.value = 'more';
		}, 100);
	});
</script>

<style scoped lang="scss">
	/* 作者页面主容器 */
	.author-page {
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;

		/* 作者简介区域 */
		.author-intro {
			background-color: #ffffff;
			border-radius: 16px;
			padding: 24px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
			margin: 10px;

			/* 作者头部信息 */
			.author-header {
				display: flex;
				align-items: center;
				margin-bottom: 20px;

				/* 作者头像 */
				.author-avatar {
					width: 90px;
					height: 90px;
					border-radius: 50%;
					margin-right: 20px;
					border: 3px solid #f0f0f0;
					overflow: hidden;
				}

				/* 作者名称 */
				.author-name {
					font-size: 22px;
					font-weight: bold;
					color: #333333;
					flex: 1;
				}

				/* 关注按钮 */
				button {
					padding: 8px 22px;
					border-radius: 22px;
					font-size: 15px;
					font-weight: 500;
					transition: all 0.3s ease;
					outline: none;

					/* 已关注状态 */
					&.followed {
						background-color: #f5f5f5;
						color: #666666;
						border: 1px solid #e0e0e0;
					}

					/* 未关注状态 */
					&.unfollowed {
						background-color: #ffad08;
						color: #ffffff;
						border: none;
					}

					&:hover {
						opacity: 0.9;
						transform: scale(1.03);
					}
				}
			}

			/* 作者统计数据 */
			.author-stats {
				display: flex;
				justify-content: space-around;
				padding-top: 18px;
				border-top: 1px solid #f0f0f0;

				.stat-item {
					text-align: center;
					color: #666666;
					font-size: 15px;

					&:nth-child(1) {
						color: #ff6b6b;
					}

					&:nth-child(2) {
						color: #4ecdc4;
					}

					&:nth-child(3) {
						color: #ffbe0b;
					}
				}
			}
		}

		/* 标签选项卡 */
		.tabs {
			display: flex;
			justify-content: space-around;
			padding: 12px 0;
			background-color: #ffffff;
			border-radius: 16px;
			margin: 10px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);

			.tab-item {
				width: 33.33%;
				text-align: center;
				font-size: 16px;
				font-weight: 500;
				color: #666666;
				padding: 8px 0;
				border-radius: 16px;
				transition: all 0.3s ease;

				/* 激活状态 */
				&.active {
					background-color: #f3e5f5;
					color: #333333;
					transform: scale(1.05);
				}
			}
		}

		/* Swiper容器 */
		.swiper-container {
			height: 100vh;
			margin: 10px;
		}

		/* 标签内容区域 */
		.tab-content {
			padding: 15px;
			background-color: #ffffff;
			border-radius: 16px;
			margin-bottom: 15px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
		}

		/* 列表项 */
		.list-item {
			display: flex;
			align-items: center;
			padding: 12px 0;

			/* 列表项头像 */
			.item-avatar {
				width: 60px;
				height: 60px;
				border-radius: 50%;
				margin-right: 15px;
				border: 2px solid #f0f0f0;
				overflow: hidden;
			}

			/* 列表项详情 */
			.item-details {
				flex: 1;
				overflow: hidden;

				/* 列表项名称 */
				.item-name {
					font-size: 16px;
					font-weight: 500;
					color: #333333;
					margin-bottom: 5px;
				}

				/* 列表项描述 */
				.item-description {
					font-size: 13px;
					color: #999999;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
</style>